<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #mycanvas{
        border: 1px solid #000;
    }
</style>
<body>
    <canvas id="mycanvas" width="600px" height="400px">
        当前浏览器不支持canvas
    </canvas>
</body>
<script type="text/javascript">
    window.onload = function () {
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        var imageObj = new Image()
        var canvasW = canvas.width/2
        var canvasH = canvas.height/2
        imageObj.src='images/wm6.jpg'
        imageObj.onload=function () {
            //context.drawImage(imageObj,100,100,200,200)//绘制图像
            context.drawImage(imageObj,0,0,80,80)
            //(图片,放在位置x，放在位置y,图片大小w,图片大小h,绘制到目标区域起始位置x,绘制到目标区域起始位置y,绘制到目标区域图片大小w,绘制到目标区域图片大小h)
        }
        // 绘制实心文本
        context.font = "italic 30px Arial" //斜体 大小 Arial字体
        context.fillStyle = "#ff0"
        context.fillText('你好',0,120)

        //绘制锚边文本
        context.font = "italic 30px Arial"
        context.strokeStyle='#f0f'
        context.lineWidth = 1 //锚边粗细
        context.textAlign='left'//文本显示方式
        context.strokeText('你好',0,160)


        //绘制线条
        context.moveTo(90,0)//开始点
        context.strokeStyle='#ff3030'
        context.lineWidth=3
        context.lineTo(90,180)//经过
        context.lineTo(0,180)//经过
        context.stroke()




    }
</script>
</html>